<template>
  <div class="user">
    <CateHea class="user-hea">
      <template #left><i class="iconfont icon-zuojiantou" @click="$router.go(-1)"></i></template>
      <template #center><span>我的知心Go</span></template>
      <template #right><i class="iconfont icon-shixincaidan"></i></template>
    </CateHea>
    <div class="user-page">
      <div class="info">
        <div class="wrap">
          <UserInfo v-if="userInfo">
            <template #username>用户名：{{ userInfo.username }}</template>
            <template #account>账号：{{ userInfo.email }}</template>
          </UserInfo>
          <router-link to="/proFile" class="p-manage"><i class="iconfont icon-shezhi"></i><span>账号管理</span></router-link>
        </div>
      </div>
      <div class="menu">
        <div class="menu-item">
          <i class="iconfont icon-qianbao_o"></i>
          <span>待付款</span>
        </div>
        <div class="menu-item">
          <i class="iconfont icon-truck-full"></i>
          <span>待收货</span>
        </div>
        <div class="menu-item">
          <i class="iconfont icon-renminbi"></i>
          <span>已完成</span>
        </div>
        <div class="menu-item">
          <i class="iconfont icon-shouye"></i>
          <span>全部订单</span>
        </div>
      </div>
      <div class="user-fork">
        <div class="fork-item">
          <span class="count">20</span>
          <span>关注的商品</span>
        </div>
        <div class="fork-item">
          <span class="count">20</span>
          <span>关注的店铺</span>
        </div>
        <div class="fork-item">
          <span class="count">20</span>
          <span>我的足迹</span>
        </div>
      </div>
      <div class="recommend">
        <p class="recommend-title">为你推荐</p>
        <!-- <RecommendList :recommendList="recommendList" v-if="recommendList"></RecommendList> -->
        <RecommendList :recommendList="$store.getters.getRecommendData"></RecommendList>
      </div>
    </div>
    <TabBar :index="3"></TabBar>
  </div>
</template>

<script>
import TabBar from '@/components/common/TabBar'
import CateHea from '@/components/common/CateHea'
import UserInfo from '@/components/content/user/UserInfo'
import RecommendList from '@/components/common/RecommendList.vue'
// import { getRecommend } from '@/http/index.js'
import { mapState } from 'vuex'
export default {
  components: {
    TabBar,
    CateHea,
    UserInfo,
    RecommendList,
  },

  created() {
    this.$store.dispatch('getInfo')
    this.$nextTick(function () {
      this.fetchRecommend()
    })
  },
  computed: {
    ...mapState(['userInfo', 'recommendList']),
  },
  methods: {
    fetchRecommend() {
      // getRecommend().then((res) => {
      //   this.recommendList = res.data
      // })
      this.$store.dispatch('getRecommendDataList')
    },
  },
}
</script>

<style lang="scss" scoped>
.user {
  height: 100%;
  background-color: #f5f5f5;
}
.user-hea {
  background-color: white;
}
.user-page {
  margin-top: 110px;
  width: 100%;
  .info {
    margin: 20px 3%;
    width: 94%;
    height: 220px;
    background: linear-gradient(90deg, #eb3c3c, #ff7459);
    box-shadow: 0 2px 1px rgb(255 98 98 /40%);
    border-radius: 15px;
    .wrap {
      position: relative;
      display: flex;
      padding: 40px 30px;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      .p-manage {
        position: absolute;
        top: 10px;
        right: 15px;
        display: flex;
        align-items: center;
        font-size: 30px;
        .icon-shezhi {
          font-size: 50px;
        }
      }
    }
  }
  .menu {
    display: flex;
    width: 100%;
    height: 150px;
    background-color: white;
    .menu-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      font-size: 25px;
      .iconfont {
        font-size: 50px;
        color: #dd9e58;
      }
      .icon-shouye {
        color: red;
      }
    }
  }
  .user-fork {
    display: flex;
    margin-top: 30px;
    width: 100%;
    height: 150px;
    background-color: white;
    .fork-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      .count {
        font-weight: 700;
      }
    }
  }
  .recommend {
    margin: 30px 0;
    width: 100%;
    .recommend-title {
      padding-left: 10px;
      margin-bottom: 30px;
      height: 100px;
      line-height: 100px;
      background-color: white;
    }
  }
}
</style>
